<template>
  <view class="container">
    <!-- 当前设备数是0 -->
    <view class="device_empty" v-if="deviceList.length === 0">
      <view>
        <view class="custom_title"> 添加设备 </view>

        <view class="common_desc" style="margin-top: 30.72rpx">
          请扫描设备或包装上的二维码来添加设备
        </view>
      </view>

      <img src="/static/home/saomiao.png" class="device_empty_image" alt="" />
      <view class="saomiao_code" @click="goToScanCode"> 扫描设备二维码 </view>


    </view>

    <view class="device_list" v-else>
      <u-tabs @click="click" :list="deviceTabs"></u-tabs>

      <view class="device_list_content" v-if="[0, 2].includes(activekey)">
        <view class="device_info_card" v-for="item in deviceList" :key="item.id" @click="goToDeviceInfo(item.id)">
          <image src="@/static/home/demo.png" class="device_info_card_image" />

          <view class="device_info_card_content">
            <view class="title">
              {{ item.name }}
            </view>

            <view class="device_id"> 设备编号： {{ item.imei }} </view>

            <view class="device_status"> 设备状态：在线 </view>

            <view class="device_box">
              <view class="device_actions" style="display: flex; align-items: center;">
                <image src="@/static/home/shebei.png" alt="" />
                <text>查看</text>
              </view>

              <image class="shebei_btn" src="@/static/home/de_btn.png" alt="" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import customTabbar from "@/components/custom-tabbar/index.vue";
import storage from "@/utils/storage";
import { bindDevice, queryBindDevice } from "../../api";
export default {
  components: {
    customTabbar,
  },
  computed: {},
  data() {
    return {
      // 页面参数
      options: {},
      // 是否已登录
      isLogin: false,
      // 当前已添加的设备列表
      deviceList: [
      ],
      // 设备类型
      deviceTabs: [
        {
          name: "全部",
          key: 0
        },
        {
          name: "开关类",
          key: 1
        },
        {
          name: "温控类",
          key: 2
        },
        {
          name: "液位类",
          key: 3
        },
        {
          name: "安防类",
          key: 4
        },
        {
          name: "电表类",
          key: 5
        },
        {
          name: "工控类",
          key: 6
        },
      ],
      activekey: 0,
    };
  },

  onLoad(options) {
    console.log("options", options);


  },
  // 挂载
  mounted() {
    // 获取设备列表
    this.getDeviceList();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },
  watch: {},

  methods: {
    async getDeviceList() {
      try {
        const _Res = await queryBindDevice()

        console.log('_Res', _Res);

        _Res?.list?.forEach((_r) => {
          this.deviceList.push(_r)
        })

      } catch (error) {

      }

    },
    click(item) {
      console.log("item", item);
      this.activekey = item.key;
    },

    goToDeviceInfo(id) {
      uni.navigateTo({
        url: `/pages/index/deviceInfo/index?id=${id}`,
      });
    },
    goToScanCode() {

      // 如果用户没有登录
      if (!storage.get("token")) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.navigateTo({
                url: '/pages/login/index',
              })
            }
          }
        })
        return;
      }

      uni.scanCode({
        onlyFromCamera: true,
        success: async function (res) {
          console.log("条码内容：" + res.result);

          try {
            await bindDevice({
              imei: res.result,
            })

            uni.showToast({
              title: '绑定成功',
              icon: 'success',
              mask: true
            })
          } catch (error) {

            uni.showToast({
              title: error.message,
              icon: 'error',
              mask: true
            })
          }
        },
      });
    },
    // 手动添加
    addDevice() {
      uni.navigateTo({
        url: "/pages/category/initDevice/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.container {
  height: 100%;
  background: #f6f7fb;
}

.device_empty {
  padding: 0 61.36rpx 61.36rpx 61.36rpx;
}

.device_list {
  padding: 0 30.36rpx 61.36rpx 30.36rpx;
}

.device_empty_image {
  width: 247.159rpx;
  height: 366.477rpx;

  margin-left: 192.614rpx;
  margin-top: 97.159rpx;
}

.saomiao_code {
  margin-top: 83.523rpx;
  margin-left: 177.273rpx;
  background: rgba(96, 164, 247, 1);
  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 400;
  line-height: 33.75rpx;
  width: 276.136rpx;
  height: 76.705rpx;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 38.352rpx;
}

.device_list_content {
  margin-top: 28.977rpx;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  gap: 15.045rpx;
}

.device_info_card {
  // width: 332.386rpx;
  height: 201.136rpx;
  background: rgba(255, 255, 255, 1);

  padding: 11.932rpx 22.159rpx 22.159rpx 15.341rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .device_info_card_image {
    width: 160rpx;
    height: 200rpx;
  }

  .device_info_card_content {
    margin-left: 25.568rpx;
    flex: 1;

    title {
      font-family: "Microsoft YaHei";
      font-size: 25.568rpx;
      font-weight: 400;
      line-height: 33.75rpx;
      text-align: left;
    }

    .device_id {
      font-family: "Microsoft YaHei";
      font-size: 24rpx;
      font-weight: 400;
      // line-height: 20.25rpx;
      margin-top: 16.875rpx;
      color: rgba(159, 159, 159, 1);

      // width: 178.977rpx;
      // width: 192.614rpx;
    }

    .device_status {
      font-family: "Microsoft YaHei";
      font-size: 24rpx;
      font-weight: 400;
      // line-height: 20.25rpx;
      margin-top: 6.818rpx;
      color: rgba(159, 159, 159, 1);
    }

    .device_box {
      margin-top: 11.932rpx;
      display: flex;
      // justify-content: space-between;
      justify-content: end;
      align-items: center;
    }

    .device_actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(186, 186, 186, 1);
      padding: 12rpx 12rpx;
      margin-right: 12rpx;

      // width: 76.705rpx;
      // height: 28.977rpx;
      border-radius: 14.485rpx;
      display: flex;
      justify-content: center;
      // font-size: 32rpx;

      image:nth-child(1) {
        width: 34.045rpx;
        height: 34.045rpx;
      }

      text {
        font-family: "Microsoft YaHei";
        // font-size: 17.045rpx;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 22.5rpx;

        color: rgba(255, 255, 255, 1);
        margin-left: 3.409rpx;
      }
    }
  }
}

.shebei_btn {
  width: 56.25rpx;
  height: 56.25rpx;
}
</style>